/*
 *@description: 员工账单
 *@Author:@reynold
 *@Date:2025-03-22 11:01:58
 *@Update:2025-03-22 11:01:58
 *@Version: V1.0.0
*/

<template>
  <Card>
      <div>
        <div class="header">
          <div class="header_box"><el-button size="mini" @click="addproduct">添加</el-button></div>
          <div class="header_box"><el-input v-model="bindName" size="mini" placeholder="请输入名称"></el-input></div>
          <div class="header_box">
            <el-select v-model="bindStatus" size="mini" clearable placeholder="请选择状态">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- 选择栏目 -->
          <div class="header_box">
            <el-select v-model="bindIncluds" size="mini" clearable placeholder="请选择栏目">
              <el-option
                v-for="item in includsList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="header_box"><el-button size="mini" @click="inquire">查询</el-button></div>
        </div>
        <div class="table">
          <el-table
            :data="productList"
            style="width: 100%">
            <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
            <el-table-column
              prop="productNum"
              label="账单编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="员工姓名">
            </el-table-column>
            <el-table-column
              prop="price"
              label="支付金额">
            </el-table-column>
            <el-table-column
              label="状态">
              <template slot-scope="scope">
                <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status == '正常'">已支付</el-tag>
                <el-tag type="warning" size="mini" effect="dark" v-else>待支付</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="include"
              label="消费项目">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button class="columnBtn1" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button v-if="scope.row.status == '正常'" class="columnBtn2" type="text" size="small" @click="takeDown(scope.row)">取消</el-button>
                <el-button v-else class="columnBtn3" type="text" size="small" @click="updateProduct(scope.row)">支付</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageQuery.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
  
        <!-- 抽屉 -->
        <el-drawer
            :title="title"
            :visible.sync="drawer">
            <div class="demo-drawer__content">
              <el-form :model="drawerForm">
                <el-form-item label="账单编号" :label-width="formLabelWidth">
                  <el-input v-model="drawerForm.productNum" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名" :label-width="formLabelWidth">
                  <el-input v-model="drawerForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付金额" :label-width="formLabelWidth">
                  <el-input v-model="drawerForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-select v-model="drawerForm.status">
                    <el-option
                      v-for="item in statusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="消费项目" :label-width="formLabelWidth">
                  <el-select v-model="drawerForm.include">
                    <el-option
                      v-for="item in includsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="handlesubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
              </div>
            </div>
        </el-drawer>
      </div>
    </Card>
  </template>
  
  <script>
  import Card from '@/components/Card/index.vue'
  import instance from '@/utils/instance.js'
  import utils from '@/utils/utils.js'
  export default {
    data(){
      return{
        // 抽屉
        title:'',
        drawer:false,
        drawerForm:{},
        formLabelWidth: '100px',
        loading:false,
        // 搜索用的名称
        bindName:'',
        bindStatus:'',
        bindIncluds:'',
        statusList:[
          {value:'正常',label:'正常'},
          {value:'下架',label:'下架'},
        ],
        includsList:[],
        productList:[],
        pageQuery:{
          pageNum:1,
          pageSize:10
        },
        total:100
      }
    },
    methods:{
      // 初始序号
      initIndex(){
        return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
      },
      // 获取所有栏目
      getAllIncluds(){
        instance.get('/product').then(res=>{
          this.includsList = res.data.data
        }).catch(err=>{})
      },
      // 分页获取所有产品数据
      getProductList(){
        let params = {
          pageNum:this.pageQuery.pageNum,
          pageSize:this.pageQuery.pageSize,
          name:this.bindName?this.bindName:'',
          status:this.bindStatus?this.bindStatus:'',
          include:this.bindIncluds?this.bindIncluds:''
        }
        instance.post('/product/list',params).then(res=>{
          console.log(res);
          this.productList = res.data
          this.total = res.data.total
        })
      },
      // 按条件查询
      inquire(){
        this.getProductList()
      },
  
      // 下架产品
      takeDown(scope){
        instance.post('/product/tackdown',scope.id).then(res=>{
          utils.showSuccess(res.message)
          this.getProductList()
        })
      },
      // 上架产品
      updateProduct(scope){
        instance.post('/product/update',scope.id).then(res=>{
          utils.showSuccess(res.message)
          this.getProductList()
        })
      },
      // 点击编辑打开抽屉
      edit(scope){
        this.title = '编辑产品'
        this.drawerForm = scope
        this.drawer = true
      },
      // 发送编辑产品列表
      handlesubmit(){
        if(this.title == '编辑产品'){
          this.loading = true
          instance.post('/product/edit',this.drawerForm).then(res=>{
            utils.showSuccess(res.data.message)
            this.getProductList()
            this.drawer = false
            this.loading = false
          })
        }else{
          this.loading = true
          instance.post('/product/addproduct',this.drawerForm).then(res=>{
            utils.showSuccess(res.data.message)
            this.getProductList()
            this.drawer = false
            this.loading = false
          })
        }
      },
  
      // 取消抽屉
      cancelForm(){
        this.drawer = false
      },
      
      // 添加产品
      addproduct(){
        this.title = '添加产品'
        this.drawerForm = {}
        this.drawer = true
      },
  
      handleSizeChange(val) {
        this.pageQuery.pageSize = val
        this.getProductList()
      },
      handleCurrentChange(val) {
        this.pageQuery.pageNum = val
        this.getProductList()
      }
    },
    components:{
      Card
    },
    created(){
      this.getAllIncluds()
      this.getProductList()
    }
  }
  </script>
  
  <style lang="less" scoped>
  .header{
    display: flex;
    .header_box{
      margin-right: 5px;
      .el-button--mini{
        background-color: #4069e4e7;
        color: #fff;
      }
    }
  }
  .demo-drawer__content{
    form{
      height: 80vh;
    }
    .demo-drawer__footer{
      float: right;
      margin-right: 15px;
    }
  }
  </style>